<template>
  <div>
    <el-tooltip
      class="item"
      effect="dark"
      content="主题配置"
      placement="bottom"
    >
      <el-icon
        :style="{
          color: $store.state.navIsTo
            ? 'var(--menuColorFont)'
            : 'var(--navColorFont)',
        }"
        @click="openSetting"
        class="llt-icon-size"
      >
        <setting
      /></el-icon>
    </el-tooltip>

    <!-- 系统配置 end -->
    <el-drawer title="项目配置" v-model="drawerBool">
      <div class="header-setting-drawer">
        <el-alert
          title="主题色建议深色调，防止菜单鼠标悬浮字体看不清"
          type="error"
        />
        <el-divider content-position="center"><h4>是否通栏</h4></el-divider>
        <div class="aic jcc mt30">
          <el-switch :model-value="$store.state.isFull" @change="changeIsFull">
          </el-switch>
        </div>
        <el-divider content-position="center"><h4>菜单是否顶部</h4></el-divider>
        <div class="aic jcc mt30">
          <el-switch
            :model-value="$store.state.navIsTo"
            @change="changenavIsTo"
          >
          </el-switch>
        </div>
        <el-divider content-position="center"><h4>主题颜色</h4></el-divider>
        <div class="mt30">
          <!-- 颜色选择器 -->
          <el-color-picker
            popper-class="header-el-color-picker"
            color-format="rgb"
            show-alpha
            v-model="state.colors.primary"
            @change="changeThemeColor"
          ></el-color-picker>
        </div>
        <el-divider content-position="center"
          ><h4>菜单title颜色</h4></el-divider
        >
        <div class="mt30">
          <!-- 颜色选择器 -->
          <el-color-picker
            popper-class="header-el-color-picker"
            color-format="rgb"
            show-alpha
            v-model="state.colors.menuTitle"
            @change="changeThemeColorTitle"
          ></el-color-picker>
        </div>
        <el-divider content-position="center"><h4>顶栏主题颜色</h4></el-divider>

        <div class="mt30 header-theme-color-box aic">
          <div>
            <h4>导航字体颜色</h4>
            <el-color-picker
              popper-class="header-el-color-picker"
              color-format="rgb"
              show-alpha
              v-model="state.colors.navColorFont"
              @change="changeThemeColornavColorFont"
            ></el-color-picker>
          </div>

          <div class="ml15">
            <h4>导航背景颜色</h4>
            <el-color-picker
              popper-class="header-el-color-picker"
              color-format="rgb"
              show-alpha
              v-model="state.colors.navColorBg"
              @change="changeThemeColornavColorBg"
            ></el-color-picker>
          </div>
        </div>
        <el-divider content-position="center"
          ><h4>左侧菜单主题颜色</h4></el-divider
        >

        <div class="mt30 header-theme-color-box aic">
          <div class="mt30 header-theme-color-box aic">
            <div>
              <h4>菜单字体颜色</h4>
              <el-color-picker
                popper-class="header-el-color-picker"
                color-format="rgb"
                show-alpha
                v-model="state.colors.menuColorFont"
                @change="changeThemeColormenuColorFont"
              ></el-color-picker>
            </div>

            <div class="ml15">
              <h4>菜单背景颜色</h4>
              <el-color-picker
                popper-class="header-el-color-picker"
                color-format="rgb"
                show-alpha
                v-model="state.colors.menuColorBg"
                @change="changeThemeColormenuColorBg"
              ></el-color-picker>
            </div>
          </div>
        </div>
        <el-divider content-position="center"><h4>系统内置主题</h4></el-divider>

        <el-radio-group v-model="radioTheme" @change="changeTheme">
          <el-radio
            v-for="(item, index) in sysThemeList"
            :key="index"
            :label="index"
            >{{ item.name }}</el-radio
          >
        </el-radio-group>
        <div class="mt30">
          <el-button type="primary" class="w100" @click="handleInitThemeColor"
            >初始化配色方案</el-button
          >
        </div>
      </div>
    </el-drawer>
    <!-- 系统配置 end -->
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import {
  initThemeColor,
  setActiveColor,
  switchColorMenu,
  switchColorNav,
} from "/@ts/hooks/theme";
import { ElLoading } from "element-plus";
import { themeColor, sysThemeList } from "/@ts/store";
import { store } from "/@ts/store";
const router = useRouter();
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const activeIndex = ref(0);
const state = reactive({
  colors: {
    primary: "",
    navColorFont: "",
    navColorBg: "",
    menuColorFont: "",
    menuColorBg: "",
    menuTitle: "",
  },
});
let drawerBool = ref(false);
const openSetting = () => {
  drawerBool.value = true;
};

//导航是否置顶
const changenavIsTo = (e: boolean) => {
  store.commit("setnavIsTo", e);
};
//是否通栏
const changeIsFull = (e: boolean) => {
  store.commit("setIsFull", e);
};

/**
 * 颜色选择索引值
 */
let currentMenuIndex = ref(
  Number(JSON.parse(localStorage.getItem("currentMenuIndex") || "0")),
);
let radioTheme = ref(0);
let currentNavIndex = ref(
  Number(JSON.parse(localStorage.getItem("currentNavIndex") || "0")),
);

const changeTheme = (e: any) => {
  let loadingInstance = ElLoading.service({
    lock: true,
    text: "Loading",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, 0.7)",
  });

  switchColorNav(sysThemeList[e].themeNav);
  switchColorMenu(sysThemeList[e].themeMenu);
  setActiveColor(sysThemeList[e].activeColor);
  store.commit("setThemeColor", sysThemeList[e].themeColor);
  store.commit("setNavTitleColorFont", sysThemeList[e].navTitleColorFont);
  store.commit("setIsFull", false);
  store.commit("setnavIsTo", false);
  setTimeout(() => {
    loadingInstance.close();
  }, 1000);
};
//初始化配色方案
const handleInitThemeColor = () => {
  let loadingInstance = ElLoading.service({
    lock: true,
    text: "Loading",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
  store.commit("setThemeColor", themeColor);
  store.commit("setNavTitleColorFont", sysThemeList[0].navTitleColorFont);
  switchColorNav(sysThemeList[0].themeNav);
  switchColorMenu(sysThemeList[0].themeMenu);
  store.commit("setIsFull", false);
  setTimeout(() => {
    loadingInstance.close();
  }, 1000);
};

//更换主题颜色
const changeThemeColor = (e: string) => {
  let numArr: string[] = [];
  e.match(/\d+/g)?.forEach((res: string) => {
    numArr.push(res);
  });
  store.commit("setThemeColor", numArr);
};

////单独设置 导航title色 字体颜色
const changeThemeColorTitle = (e: string) => {
  store.commit("setNavTitleColorFont", e);
};
////单独设置 导航色 背景颜色
const changeThemeColornavColorBg = (e: string) => {
  switchColorNav({
    ColorFont: store.state.themeCurrentNavItem.ColorFont,
    ColorBg: e,
  });
};
////单独设置 导航色 字体颜色
const changeThemeColornavColorFont = (e: string) => {
  switchColorNav({
    ColorFont: e,
    ColorBg: store.state.themeCurrentNavItem.ColorBg,
  });
};

////单独设置 菜单色 背景颜色
const changeThemeColormenuColorBg = (e: string) => {
  switchColorMenu({
    ColorFont: store.state.themeCurrentMenuItem.ColorFont,
    ColorBg: e,
  });
};
////单独设置 菜单色 字体颜色
const changeThemeColormenuColorFont = (e: string) => {
  switchColorMenu({
    ColorFont: e,
    ColorBg: store.state.themeCurrentMenuItem.ColorBg,
  });
};

defineProps({
  msg: {
    type: String,
    required: true,
  },
});
</script>

<style scoped lang="scss"></style>
